<script setup name="soundRecording">
import { useMyStore } from "../store/index";
import { btnJson } from "@/utils/index";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import btn1 from "@/assets/btn1.png";
import btn2 from "@/assets/btn2.png";
import btn3 from "@/assets/btn3.png";
import btn4 from "@/assets/btn4.png";
const cloneData = JSON.parse(JSON.stringify(btnJson));
const pageIndex = useMyStore().pageIndex;
const pageContent = useMyStore().customArtwork.pageContent;
let item = ref(cloneData);
const total = ref("");
const jumpPage = ref("");

const currentTime = ref(0);
const currentEffectIndex = ref(0);
const showJumpPage = ref(false);
const showTotal = ref(false);
const router = useRouter();
const repList = ref(["一次展示", "延迟展示"]);
const timeList = ref(["无动作", "跳转页面", "弹提示"]);
const btnIndex = ref(0);

const btnList = ref([
  { text: "开始", url: `url(${btn1})`, color: "#333333" },
  { text: "开始", url: `url(${btn2})`, color: "#FFFFFF", weight: "600" },
  { text: "开始", url: `url(${btn3})`, color: "#000000", weight: "600" },
  { text: "开始", url: `url(${btn4})`, color: "#FFFFFF", weight: "600" },
]);
const selectBtn = (index) => {
  btnIndex.value = index;
  item.value.url = btnList.value[index].url;
};
const selectSetTime = (index) => {
  currentTime.value = index;
};
const selectClickEffect = (index) => {
  showJumpPage.value = false;
  currentEffectIndex.value = index;
  if (currentEffectIndex.value == 2) {
    showTotal.value = true;
  }
};
const diaSubtEffect = (type) => {
  item.value.click = {};
  if (type == "total") {
    item.value.click.total = total.value;
    showTotal.value = false;
  } else {
    item.value.click.swiperIndex = jumpPage.value;
    showJumpPage.value = false;
    console.log(item.value);
  }
};
const subSound = () => {
  console.log(pageContent);
  if (pageContent[pageIndex]) {
    pageContent[pageIndex].push(item.value);
  } else {
    pageContent.push([item.value]);
  }
  router.replace({
    path: "/works/add",
    query: {
      back: true,
    },
  });
};
</script>
<template>
  <div class="sound">
    <div class="textField">
      <div class="select-btn-text">选择按钮</div>
      <div class="btn-list">
        <div
          class="btn-items"
          :class="index == btnIndex ? 'btn-select' : ''"
          v-for="(item, index) in btnList"
          :style="{
            background: item.url,
            color: item.color,
            fontWeight: item.weight,
          }"
          @click="selectBtn(index)"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="sound-bottom name">
      <div class="sound-left">按钮名称</div>
      <div>
        <van-field v-model="item.btnName" placeholder="输入您的按钮名称" />
      </div>
    </div>
    <div class="click-effect">
      <div class="click-item">
        <span>出现时间</span>
        <div class="click-right">
          <div
            v-for="(item, index) in repList"
            :key="index"
            :class="currentTime == index ? 'active' : ''"
            @click="selectSetTime(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-end" v-if="currentTime">
        <div class="setUp">
          <div>
            <van-field v-model="item.showTime" placeholder="请输入延迟时长" />
          </div>
          <div @click="showJumpPage = true">
            <img class="border-img" src="@/assets/xian.png" alt="" />
            秒
          </div>
        </div>
      </div>
    </div>
    <div class="click-effect">
      <div class="click-item">
        <span>出现时间</span>
        <div class="click-right">
          <div
            v-for="(item, index) in timeList"
            :key="index"
            :class="currentEffectIndex == index ? 'active' : ''"
            @click="selectClickEffect(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div
        style="display: flex; justify-content: flex-end"
        v-if="currentEffectIndex == 1"
      >
        <div class="setUp">
          <div>
            <img class="edit-img" src="@/assets/tiaozhuan.png" alt="" />
            跳转页面名称
          </div>
          <div @click="showJumpPage = true">
            <img class="border-img" src="@/assets/xian.png" alt="" />
            去设置
          </div>
        </div>
      </div>
    </div>
    <div class="tips">提示：显示提示内容显示提示内容</div>
    <div class="btn">
      <div @click="router.back(-1)">关闭</div>
      <div @click="subSound">保存</div>
    </div>
  </div>
  <!-- 选择页面 -->
  <van-dialog v-model:show="showJumpPage" :showConfirmButton="false">
    <div class="dialog-warp">
      <span>请选择点击按钮后要跳转至哪个页面</span>
      <div class="dialog-content">
        <van-radio-group
          v-model="jumpPage"
          v-if="useMyStore().customArtwork.pageContent.length > 1"
        >
          <van-radio
            :name="index"
            label-position="left"
            v-for="(item, index) in useMyStore().customArtwork.pageContent"
            :key="index"
            >{{ "页面" + (index + 1) }}</van-radio
          >
        </van-radio-group>
        <div v-else>暂无可跳转页面</div>
      </div>
      <!-- <span>没有可选页面</span> -->
      <div class="dialog-btn-bottom">
        <div @click="showJumpPage = false">取消</div>
        <div @click="diaSubtEffect('swiper')">保存</div>
      </div>
    </div>
  </van-dialog>
  <!-- 提示 -->
  <van-dialog v-model:show="showTotal" :showConfirmButton="false">
    <div class="dialog-warp">
      <span>请选择点击按钮后要跳转至哪个页面</span>
      <div class="dialog-content">
        <van-field v-model="total" type="textarea" placeholder="请输入提示" />
      </div>
      <!-- <span>没有可选页面</span> -->
      <div class="dialog-btn-bottom">
        <div @click="showTotal = false">取消</div>
        <div @click="diaSubtEffect('total')">保存</div>
      </div>
    </div>
  </van-dialog>
</template>
<style lang="less" scoped>
.btn-select {
  border: 1px solid red;
}
.click-effect {
  margin-top: 22px;
  font-size: 26px;
  padding: 27px 20px 16px;
  background: #f8f8f8;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  :deep(.van-field) {
    padding: 0;
  }
  .click-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .click-right {
      display: flex;
      div {
        width: 156px;
        height: 60px;
        background: #ededed;
        border-radius: 16px;
      }
      div:nth-child(1) {
        width: 156px;
        height: 60px;
        background: #ededed;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      > div:nth-child(2),
      div:nth-child(3) {
        width: 156px;
        height: 60px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        font-size: 26px;
        color: #333333;
      }
    }
  }
}

.dialog-warp {
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  span {
    margin-top: 42px;
    font-size: 26px;
    color: #333333;
  }
  .dialog-content {
    box-sizing: border-box;
    margin-top: 24px;
    width: 521px;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 0 22px 0 20px;
    :deep(.van-cell) {
      background-color: #f8f8f8 !important;
    }
    .van-radio {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
    }
  }
  .dialog-btn-bottom {
    display: flex;
    margin-top: 21px;
    margin-bottom: 30px;
    div:nth-child(1) {
      flex: 1;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 60%);
      border-radius: 16px;
      opacity: 0.5;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      margin-right: 24px;
    }
    div:nth-child(2) {
      flex: 1;
      height: 70px;
      text-align: center;
      line-height: 70px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      font-size: 28px;
      color: #000000;
    }
  }
}
.setUp {
  width: 506px;
  height: 60px;
  margin-top: 22px;
  box-sizing: border-box;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  div {
    display: flex;
    align-items: center;
  }
  .edit-img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .border-img {
    width: 1px;
    height: 28px;
    margin-right: 12px;
  }
}
.active {
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%) !important;
}

.select-btn-text {
  font-size: 26px;
  font-family: PingFang-SC-Regular, PingFang-SC;
  font-weight: 400;
  color: #333333;
  line-height: 37px;
}

.sound {
  padding: 30px;
  .textField {
    height: 280px;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 27px 23px 37px;
    box-sizing: border-box;
    :deep(.van-cell) {
      background: #f8f8f8;
    }
  }
  .btn-list {
    display: flex;
    flex-wrap: wrap;
  }
  .btn-items {
    width: 242px;
    height: 57px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
  .sound-title {
    margin-top: 56px;
    margin-bottom: 27px;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
  }
  :deep(.van-circle) {
    width: 150px;
    height: 150px;
  }
  .cri-wapper {
    display: flex;
    justify-content: center;
    margin-bottom: 170px;
  }
  .sound-click {
    width: 146px;
    height: 146px;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
  }
  .name {
    display: flex;
    align-items: center;
    margin-top: 24px;
  }
  .sound-bottom {
    padding: 0 8px 0 20px;
    margin-bottom: 24px;
    min-height: 92px;
    background: #f8f8f8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size: 26px;
    :deep(.van-field) {
      background-color: #f8f8f8;
    }
    .sound-right {
      display: flex;
      div {
        width: 154px;
        height: 60px;
        margin-left: 26px;
        text-align: center;
        line-height: 60px;
        background: #ededed;
        border-radius: 16px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 101px;
    padding: 0 33px;
    div {
      width: 335px;
      height: 90px;
      border-radius: 16px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
    }
    div:nth-child(1) {
      border: 1px solid #87f4df;
      color: #49cb96;
      margin-right: 10px;
      background: @btn-color;
    }
    div:nth-child(2) {
      color: #000000;

      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
    }
  }
}
.tips {
  margin-top: 54px;
  text-align: center;
  font-size: 28px;
  color: #999999;
  line-height: 40px;
}
</style>
